<template>
  <div :class="styles.centerContainer">
    <div :class="styles.gradual_change">
      <div :class="styles.centerTop">
        <LeftOutlined
          @click="handleRouteSkip('/my')"
          :style="{ fontSize: '20px', color: '#343434' }"
        />
      </div>

      <div :class="styles.user">
        <div :class="styles.left">
          <div :class="styles.avatar">
            <div :class="styles.userIcon">
              <img src="../assets/img/my/head.jpg" alt="" />
            </div>
            <div :class="styles.cameraIcon">
              <img src="../assets/img/center/camera.png" alt="" />
            </div>
          </div>
          <div :class="styles.userInfo">
            <div :class="styles.userName">
              <div :class="styles.hello">
                <img src="../assets/img/center/hello.jpg" alt="" />
              </div>
              <span :class="styles.text">{{ userName }}</span>
              <div :class="styles.eyes" @click="handleShowName">
                <img :src="isShowName ? openEyes : closeEyes" alt="" />
              </div>
            </div>
            <div :class="styles.signature">
              <img src="../assets/img/center/signature.jpg" alt="" />
            </div>
          </div>
        </div>
        <div :class="styles.right">
          <img src="../assets/img/center/qr.jpg" alt="" />
        </div>
      </div>

      <div :class="styles.bc">
        <img src="../assets/img/center/bc.jpg" alt="" />
      </div>
    </div>
    <div :class="styles.contain">
      <div :class="styles.tabs">
        <div :class="[styles.tab, styles.active]">
          <div :class="styles.phoneIcon">
            <img src="../assets/img/center/phone.jpg" alt="" />
          </div>
          <span>手机</span>
          <span>1</span>
        </div>
        <div :class="styles.tab">
          <span>宽带</span>
        </div>
        <div :class="styles.tab">
          <span>固话</span>
        </div>
        <div :class="styles.tab">
          <span>其他</span>
        </div>
      </div>
      <div :class="styles.detailBox">
        <div :class="styles.detail">
          <div :class="styles.detail_top">
            <div :class="styles.left">
              <span :class="styles.phoneNumber">{{ mainPhone }}</span>
              <div :class="styles.tag">主卡</div>
              <div :class="styles.eyesIcon" @click="handleShowMainPhone">
                <img :src="isShowMainPhone ? openEyes : closeEyes" alt="" />
              </div>
            </div>
            <div :class="styles.right">当前登陆号码</div>
          </div>
          <div :class="styles.resetInfo">
            <div :class="styles.resetInfoItem">
              <div :class="styles.left">
                <span>归属地</span>
                <span>{{ config.center.mainAddress }}</span>
              </div>
              <div :class="styles.right">
                <span>电信商城</span>
                <RightOutlined :style="{ fontSize: '1em', color: '#9b9b9b' }" />
              </div>
            </div>
            <div :class="styles.resetInfoItem">
              <div :class="styles.left">
                <span>入网时间</span>
                <span>{{ config.center.mainDate }}</span>
              </div>
              <div :class="styles.right">
                <span>去充值</span>
                <RightOutlined :style="{ fontSize: '1em', color: '#9b9b9b' }" />
              </div>
            </div>
            <div :class="styles.resetInfoItem">
              <div :class="styles.left">
                <span>当前套餐</span>
                <span>{{ config.center.mainPlan }}</span>
              </div>
              <div :class="styles.right">
                <span>我的套餐</span>
                <RightOutlined :style="{ fontSize: '1em', color: '#9b9b9b' }" />
              </div>
            </div>
            <div :class="styles.resetInfoItem">
              <div :class="styles.left">
                <span>共享号码</span>
                <span>
                  当前有
                  <span :class="styles.shareNumber">{{
                    config.center.shareNumber
                  }}</span>
                  个号码共享套餐
                </span>
              </div>
              <div :class="styles.right">
                <span>我的套餐</span>
                <RightOutlined :style="{ fontSize: '1em', color: '#9b9b9b' }" />
              </div>
            </div>
          </div>

          <div :class="styles.assistant" v-if="othersPhone.length">
            <div
              v-for="(item, index) in othersPhone"
              :key="index"
              :class="styles.assistantItem"
            >
              <div :class="styles.detail_top">
                <div :class="styles.left">
                  <!-- 根据 show 状态来展示号码 -->
                  <span :class="styles.phoneNumber">
                    {{ item.show ? item.phoneNum : maskPhone(item.phoneNum) }}
                  </span>
                  <div :class="styles.tag">副卡</div>
                  <div :class="styles.eyesIcon" @click="toggleShow(index)">
                    <img :src="item.show ? openEyes : closeEyes" alt="open" />
                  </div>
                </div>
                <div :class="styles.right">登录查看详情</div>
              </div>
              <div :class="styles.resetInfoItem">
                <div :class="styles.left">
                  <span>归属地</span>
                  <span>{{ item.address }}</span>
                </div>
              </div>
              <div :class="styles.resetInfoItem">
                <div :class="styles.left">
                  <span>当前套餐</span>
                  <span>{{ item.plan }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div :class="styles.advertising">
        <img src="../assets/img/center/advertising.jpg" alt="" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { LeftOutlined, RightOutlined } from "@ant-design/icons-vue";
import { computed, ref } from "vue";
import styles from "./Center.module.less";
import closeEyes from "../assets/img/center/eyesClose.png";
import openEyes from "../assets/img/center/Icon_eyes.png";
import config from "../config";
import { useRouter } from "vue-router";
const router = useRouter();
const isShowName = ref(false);
const isShowMainPhone = ref(false);
const originalName = ref(config.center.userName);
const othersPhone = ref(config.center.othersPhone);
const userName = computed(() => {
  return isShowName.value
    ? originalName.value
    : originalName.value.charAt(0) + "*".repeat(originalName.value.length - 1);
});
const mainPhone = computed(() => {
  return isShowMainPhone.value
    ? config.center.mainPhone
    : config.center.mainPhone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
});

const handleShowName = () => {
  isShowName.value = !isShowName.value;
};
const handleShowMainPhone = () => {
  isShowMainPhone.value = !isShowMainPhone.value;
};
const maskPhone = (phone) => {
  return phone.replace(/^(\d{3})\d*(\d{4})$/, "$1****$2");
};
const toggleShow = (index) => {
  othersPhone.value[index].show = !othersPhone.value[index].show;
};

const handleRouteSkip = (path) => {
  router.push(path);
};
</script>
